<template>
  <div class="publish">
    <el-card>
      <!-- 头部面包屑 -->
      <template #header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <!-- 表单 -->
      <el-form label-width="100px" :model="form" :rules="rules" ref="form">
        <el-form-item label="标题" prop="title">
          <el-input
            placeholder="请输入文章标题"
            v-model="form.title"
          ></el-input>
        </el-form-item>
        <!-- 频道选择 -->
        <el-form-item label="频道" prop="channel_id">
          <HmSelect :form="form"></HmSelect>
        </el-form-item>
        <!-- 单选框组件 -->
        <el-form-item label="封面" prop="cover">
          <el-radio-group v-model="form.cover.type" @change="radioChange">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 图片上传 -->
          <div v-if="bol">
            <el-upload
              :file-list="fileList"
              v-if="form.cover.type > 0"
              :action="baseUrl + '/v1_0/upload'"
              list-type="picture-card"
              name="image"
              :on-success="onSuccess"
              :before-upload="beforeUpload"
              :limit="form.cover.type"
              :on-remove="onRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
        <!-- 富文本 -->
        <el-form-item label="内容" prop="content">
          <quillEditor
            v-model="form.content"
            @change="editorChange"
          ></quillEditor>
        </el-form-item>
        <el-form-item>
          <div v-if="!$route.query.id">
            <el-button type="primary" @click="submit(false)"
              >发布文章</el-button
            >
            <el-button @click="submit(true)">存入草稿</el-button>
          </div>
          <div v-else>
            <el-button type="danger" @click="edit(false)">修改文章</el-button>
            <el-button @click="edit(true)">修改草稿</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { mpArticlesPost, mpArticlesGet, mpArticlesPut } from '@/api/index.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      bol: true,
      form: {
        title: '',
        content: '',
        cover: {
          type: 1,
          images: []
        },
        channel_id: ''
      },
      rules: {
        title: [{ required: true, message: '必填', trigger: 'change' }],
        content: [
          { required: true, message: '内容不能为空', trigger: 'change' }
        ],
        cover: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (value.type > 0) {
                value.images.length === value.type
                  ? callback()
                  : callback(new Error(`请上传${value.type}张图片`))
              } else {
                callback()
              }
            }
          }
        ],
        channel_id: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  computed: {
    fileList () {
      return this.form.cover.images.map(item => {
        console.log(item)
        return { url: item }
      })
    }
  },
  created () {
    if (this.$route.query.id) {
      this.getInfo()
    }
  },
  methods: {
    async getInfo () {
      const res = await mpArticlesGet(this.$route.query.id)
      // console.log(res)
      this.form = res.data
    },
    onSuccess (res) {
      this.form.cover.images.push(res.data.url)
      this.$refs.form.validateField(['cover'])
      // console.log(res)
    },
    radioChange () {
      this.form.cover.images = []
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    beforeUpload (file) {
      const isImage =
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/jpeg'
      const isLimit2M = file.size / 1024 / 1024 < 2
      if (!isImage) {
        this.$message.error('请上传png与jpg格式图片')
      }
      if (!isLimit2M) {
        this.$message.error('请上传2M以内的图片')
      }

      return isImage && isLimit2M
    },
    onRemove (file) {
      const _index = this.form.cover.images.findIndex(item => item === file.url)
      this.form.cover.images.splice(_index, 1)
    },
    submit (bol) {
      this.$refs.form.validate(async result => {
        if (result) {
          const res = await mpArticlesPost(this.form, bol)
          console.log(res)
          this.$message.success(bol ? '存入草稿成功' : '发表文章成功')
          this.$router.push('/article')
        }
        // console.log(result)
      })
    },
    edit (bol) {
      this.$refs.form.validate(async result => {
        if (result) {
          const res = await mpArticlesPut(this.form, bol)
          console.log(res)
          this.$message.success(bol ? '修改草稿成功' : '修改文章成功')
          this.$router.push('/article')
        }
        // console.log(result)
      })
    },
    editorChange () {
      this.$refs.form.validateField(['content'])
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 400px;
}
div.el-select {
  width: 400px;
}
::v-deep .ql-editor {
  min-height: 150px;
}
</style>
+
